<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-12-12 23:41:40
 * @LastEditors: chentao 294446993@qq.com
 * @LastEditTime: 2023-04-13 10:50:26
 * @FilePath: \vue3-pc-app\src\components\Test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="container">
        <div>
            <VueScrollList />
            <panelHeader />
            <sueAtComponent />
            <setupImageComponent />
            <div>
                <el-button @click="openManagerDialog()"> 打开弹窗 </el-button>
                <el-button @click="openMsgUserDetailDialog">打开用户信息弹窗</el-button>
                <dialogGroupManagerSetting :dialogGroupManagerVisible="dialogGroupManagerVisible" />
                <dialogUserDetail />
            </div>

        </div>

    </div>
</template>

<script >
import { defineComponent, onMounted } from 'vue'
import { useStore } from 'vuex'
import vueScrollList from '../components/chat/vueScrollList.vue'
import vueAtComponent from '../components/vueAtComponent.vue'
import setupImageComponent from '../components/setupImageComponent.vue'
import dialogGroupManagerSetting from '../components/dialogGroupManagerSetting.vue'
import dialogUserDetail from '../components/dialog/dialogUserDetail.vue'
import panelHeader from '../components/chat/panelHeader.vue'
import { DIALOG_MSG_USER_DETAIL_VISIBLE } from '../store/actiontypes'
export default defineComponent({
    name: 'test',
    components: {
        vueAtComponent,
        setupImageComponent,
        dialogGroupManagerSetting,
        dialogUserDetail,
        panelHeader,
        vueScrollList
    },
    props: {
        msg: String
    },
    setup(props, context) {
        const store = useStore();
        const openManagerText = ref("打开管理员弹窗")
        const dialogGroupManagerVisible = ref(false)
        const openManagerDialog = () => {
            dialogGroupManagerVisible.value = true
        }
        const openMsgUserDetailDialog = () => {
            store.commit(
                DIALOG_MSG_USER_DETAIL_VISIBLE, { dialogMsgUserDetailVisible: true }
            )
        }
        return {
            openManagerText,
            dialogGroupManagerVisible,
            openManagerDialog,
            openMsgUserDetailDialog
        }
    }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
    display: flex;
    flex-direction: column;
}
</style>
